<template>
  <div class="header">
    <div class="header-slogin" @click="toHome"><img src="../../assets/slogin.png" alt=""></div>
    <div class="header-input">
      <input type="text"  v-model="searchKeyWord" @keyup.enter="SearchGoodsList">
      <div class="btn" @click="SearchGoodsList">搜索</div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "SearchHeader",
};
</script>

<script lang="ts" setup>

import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

//定义搜索关键词变量
const searchKeyWord = ref()

/**
 * 搜索商品列表（谁引入就是父组件）
 */
const SearchGoodsList = () => {
  router.push({
    name: 'Search',
    query: { searchKeyWord: searchKeyWord.value }
  })
  searchKeyWord.value = '';
}
const toHome = () => {
  searchKeyWord.value = '';
  router.push({
    name: 'Home',
  })
}





</script>

<style scoped lang="less">
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // background-color: pink;
  height: 111px;
  width: 1190px;
  margin: 12px auto 0;



  .header-slogin {
    img {
      width: 87px;
      height: 53px;
    }
  }

  .header-input {
    position: relative;

    input {

      width: 632px;
      height: 42px;
      border-radius: 20px 21px 21px 20px;
      border: 1px solid #fe0137;
      outline: none;
      padding-left: 15px;

    }

    .btn {
      width: 90px;
      height: 42px;
      background-color: #fe0137;
      font-size: 18px;
      color: #fff;
      line-height: 42px;
      text-align: center;
      border-radius: 20px;
      position: absolute;
      top: 1px;
      right: 0px;
      cursor: pointer;
    }


  }
}
</style>
